import React from 'react'
// ===================================================================== Temp
import Table from '#cpt/temp/Table'
import Controls from '#cpt/temp/Controls'
import Delete from '#cpt/temp/Delete'
import TableControls from '#cpt/temp/TableControls'
// ===================================================================== global declare
const { $fn, $http, $Lazy } = window
// ===================================================================== Lazy
const Box 			= $Lazy.load(()=>import('#tp/box/box'))
const HandUpload 	= $Lazy.state(()=>import('#private/pages/hand-upload-file'))
const PreviewImage 	= $Lazy.state(()=>import('#private/pages/preview-image'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		list:[]
	}
	
	model = {}
	
	componentDidMount(){
		const { uuid, disabled } = this.props
		if(disabled){ this.setState({ selectedKeys: null }) }
		if(uuid){
			this.query = { contract_id: uuid }
			this.submit = this.query
		}
		this.fetch()
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'bs-file/index')
	
	// 表单
	cols = [
		{ title: '文件名', 		dataIndex: 'id', 			width:60 },
		{ title: '上传时间', 	dataIndex: 'update_at', 	...$fn.table.time },
		{ title: '上传人', 		dataIndex: 'upload_user', 	width:150 },
		TableControls.controls.call(this, { width: 120 })
	]
	// 表格操作按钮
	table_controls = (text,{ uuid, file_name }) => {
		return [
			TableControls.click.call(this, '查看', () => { 
				if(file_name.indexOf('png') >= 0 || file_name.indexOf('jpg') >= 0 || file_name.indexOf('jpeg') >= 0 ){
					this.previewRef.open(file_name)
				}else{
					window.open(file_name)
				}
			},{disabled: this.props.disabled}),
			this.onDel(uuid)
		]
	}
	// 操作按钮
	controls = () => {
		return [
			Controls.click.call(this,'上传文件', () => this.handUploadRef.open(), { disabled: this.props.disabled}),
			// this.onDel()
		]
	}
	// 删除
	onDel = uuid => Delete.call(this, 'bs-file/del', { uuid, isKeys: !uuid, disabled: this.props.disabled })
	
	render(){
		return (
			<>
				<Box title='文件列表' small controls={this.controls()} className='mt5 w' contentClassName={$fn.hasArray(this.state.data) ? 'pt10' : 'ptb10'}>
					{/* 表格 */}
					{ Table.call(this, { type:1, wrapStyle: {height:350} }) }
				</Box>
				{/* 上传文件 */}
				<HandUpload onRef={ref=>this.handUploadRef = ref} onRefresh={async ({ data, close, onError })=>{
					// 修改上传文件、报告单、图片的接口地址和参数及返回结果处理 2021-10-9 --马婷
					await data.forEach( async (data) => {
						await $http.submit(null,'bs-file/add',{ param: { file_name:data, contract_id: $fn.query('uuid'), onError }, loading:false })
					})
					close()
					this.fetch()
				}} />
				{/* 查看图片 */}
				<PreviewImage onRef={ref=>this.previewRef = ref} />
			</>
		)
	}
}

export default Index